<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">

    <meta name="product" content="ELX">
    <meta name="author" content="Srimaya Technology and Communication">
    <meta name="description" content="Electronic Labour System">
    <meta name="keywords" content="KHEDN, MOHA, brunei">
    
	<link rel="stylesheet" href="css/metro-bootstrap.css">
	<link rel="stylesheet" href="css/costum.css">
	
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
	<script src="js/metro/metro-calendar.js"></script>
	<script src="js/metro/metro-datepicker.js"></script>
	<script src="js/metro/metro-date-format.js"></script>
	<script src="js/metro/metro-input-control.js"></script>
	
	<script src="js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

	
	<script>

		//DATEPICKER
		$("#datepicker").datepicker();
	
		//FONT RESIZING
		$(document).ready(function(){
		  // Reset Font Size
		  var originalFontSize = $('html').css('font-size');
			$(".resetFont").click(function(){
			$('html').css('font-size', originalFontSize);
		  });
		  // Increase Font Size
		  $(".increaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		  // Decrease Font Size
		  $(".decreaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*0.8;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		});

  </script>

<title>Signup ELX</title>
</head>

<body class="metro">

    <div class="grid container fluid">
        <div class="row">
            <div class="span8 bg-white">
                <div class="padding20">
					<nav class="horizontal-menu">
							<li><a href="http://priawadi.blogspot.com">Home</a></li>
							<li><a href="http://priawadi.blogspot.com">FAQ</a></li>
							<li><a href="http://priawadi.blogspot.com">Feedback</a></li>
							<li><a href="http://priawadi.blogspot.com">Contact Us</a></li>
							<h2><strong>ELECTRONIC LABOR EXCHANGE</strong><h2>
							<img src="images\logoMoha.png" class="span6">
					</nav>						        
                </div>
            </div>
			
            <div class="span4">
                <div class="row">					
					<small>Welcome <strong><a href="">Guset</a></strong></small>,
                </div>
				
					<div class="span4"></div>
						
                        <img src="images\logoBrunei.png" class="span4 offset3">
			
								<!-- Text Resizing -->
						<div id="changeFont">
							<strong><a href="#" class="increaseFont">A+</a></strong>
							<strong><a href="#" class="resetFont">A</a></strong>
							<strong><a href="#" class="decreaseFont">A-</a></strong>
						</div>
			
						<div class="search">
							<form>
								<div class="input-control text">
								<a href=""><img src="images\search.png"></a>
									<input type="text" class="span10" placeholder="Search...">
								</div>
							</form>
						</div>
            </div>			
			<!-- Menu -->
			<div class="row">
				<ul id="menu">
					<li id="job"><a href=""></a></li>
					<li id="training"><a href=""></a></li>
					<li id="events"><a href=""></a></li>
					<li id="gallery"><a href=""></a></li>
					<li id="chat"><a href=""></a></li>
				</ul>
			</div>
		</div>
			
	</div>
	
			<!-- FORM LOGIN -->

			<div class="grid container fluid">	
				<!-- <div class="row"> -->
				<legend>Registration as Job Seeker</legend>
				
					<label>Login Name</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="login name"/>
						<button class="btn-clear"></button><br/>
					</div>	
					

					<label>First Name</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="input first name"/>
						<button class="btn-clear"></button>
					</div>
					
					<label>Last Name</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="input last name"/>
						<button class="btn-clear"></button>
					</div>					
					
					<label>Full Name</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="input full name"/>
						<button class="btn-clear"></button>
					</div>

					<label>Password</label>
					<div class="input-control password span4">
						<input type="password" value="" placeholder="input password"/>
						<button class="btn-reveal"></button>
					</div>
					
					<label>Re-Password</label>
					<div class="input-control password span4">
						<input type="password" value="" placeholder="input password"/>
						<button class="btn-reveal"></button>
					</div>	
					
					<label>Email</label>
					<div class="input-control text span4">
						<input type="email" value="" placeholder="input email"/>
					</div>
					
					<label>Re-Email</label>
					<div class="input-control text span4">
						<input type="email" value="" placeholder="input email"/>
					</div>
					
					<label>Date of Birth</label>
					<div class="grid fluid">
                        <div class="row">
                            <div class="span4">
                                <div class="input-control text" data-role="datepicker">
                                    <input type="text">
                                    <button class="btn-date"></button>
                                </div>
                            </div>
                        </div>
                    </div>
					
					<label>Gender</label>
					<div class="input-control radio margin10" data-role="input-control">
						<label>
							Male
							<input type="radio" name="r1" checked />
							<span class="check"></span>
						</label>
					</div>
					<div class="input-control radio margin10" data-role="input-control">
						<label>
							Female
							<input type="radio" name="r1" />
							<span class="check"></span>
						</label>
					</div>

					<label>Country</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="country"/>
					</div>
					
					<label>IC Number</label>
					<div class="input-control text span4">
						<input type="text" value="" placeholder="input IC number"/>
						<button class="btn-clear"></button>
					</div>	

					<label>Scan IC</label>
					<div class="input-control file span4">
						<input type="file" />
						<button class="btn-file"></button>
					</div>	
					
					<div class="row">
					<button class="info">Submit</button>
					</div>
					

				<!-- </div> -->
			</div>

		
					
	<div class="row">		
    <div class="bg-dark">
        <div class="container">
			<div class="grid no-margin">
				<div class="row no-margin pad30">					
						<div class="span3">
						<img src="images\job_post.png">
						<a href="" class="bottom">Find a Job</a><br>
						<a href="" class="bottom">Search Vacancy</a><br>
						<a href="" class="bottom">Latest Jobs</a>
						</div>
						<div class="span3">
						<img src="images\job_seekers.png">						
						<a href="" class="bottom">Register Job Seeker</a><br>
						<a href="" class="bottom">Job Seeker Login</a><br>
						</div>
						<div class="span3">
						<img src="images\employers.png">
						<a href="" class="bottom">Register an Employer</a><br>
						<a href="" class="bottom">Search Employers</a><br>
						<a href="" class="bottom">Employer Login</a>
						</div>
							
				</div>
			</div>
        </div>
    </div>
	</div>
	</div>
	
	<div id="footer" class="row">
    Copyright © 2013 ELX. All Rights Reserved
	</div>
    
	</body>

</html>